import { Outlet, useModel } from '@umijs/max';
import { Badge, TabBar } from 'antd-mobile';
import {
    AppOutline,
    MessageFill,
    MessageOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons';

export default function Layout() {
    const { initialState } = useModel('@@initialState');

    const tabs = [
        {
            key: 'home',
            title: '首页',
            icon: <AppOutline />,
            badge: Badge.dot,
        },
        {
            key: 'todo',
            title: '待办',
            icon: <UnorderedListOutline />,
            badge: '5',
        },
        {
            key: 'message',
            title: '消息',
            icon: (active: boolean) =>
                active ? <MessageFill /> : <MessageOutline />,
            badge: '99+',
        },
        {
            key: 'personalCenter',
            title: '我的',
            icon: <UserOutline />,
        },
    ];

    return (
        <div
            style={{
                height: '100vh',
                paddingBottom: '56px',
                overflow: 'hidden',
            }}
        >
            <div
                style={{
                    height: 'calc(100vh - 56px)',
                    width: '100%',
                    overflow: 'hidden',
                }}
            >
                <Outlet />
            </div>
            <TabBar style={{ position: 'fixed', left: 0, right: 0, bottom: 0 }}>
                {tabs.map((item) => (
                    <TabBar.Item
                        key={item.key}
                        icon={item.icon}
                        title={item.title}
                        badge={item.badge}
                    />
                ))}
            </TabBar>
        </div>
    );
}
